<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌单</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/static/css/admin.css" media="all"/>
</head>
<body class="layui-layout-body" layadmin-themealias="classic-black">
<div class="layui-layout layui-layout-admin">
    <!-- 页面头部 -->
    <div class="layui-header">
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item layadmin-flexible" lay-unselect="">
                <a href="javascript:" layadmin-event="flexible" title="侧边伸缩">
                    <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                <a href="http://www.layui.com/admin/" target="_blank" title="前台">
                    <i class="layui-icon layui-icon-website"></i>
                </a>
            </li>
            <li class="layui-nav-item" lay-unselect="">
                <a href="javascript:" layadmin-event="refresh" title="刷新">
                    <i class="layui-icon layui-icon-refresh-3"></i>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                <input type="text" placeholder="搜索..." autocomplete="off" class="layui-input layui-input-search"
                       layadmin-event="serach" lay-action="template/search.html?keywords=">
            </li>
            <span class="layui-nav-bar" style="left: 38px; top: 48px; width: 0px; opacity: 0;"></span></ul>
        <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">

            <li class="layui-nav-item" lay-unselect="">
                <a lay-href="app/message/index.html" layadmin-event="message" lay-text="消息中心">
                    <i class="layui-icon layui-icon-notice"></i>

                    <!-- 如果有新消息，则显示小圆点 -->
                    <span class="layui-badge-dot"></span>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                <a href="javascript:" layadmin-event="theme">
                    <i class="layui-icon layui-icon-theme"></i>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                <a href="javascript:" layadmin-event="note">
                    <i class="layui-icon layui-icon-note"></i>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                <a href="javascript:" layadmin-event="fullscreen">
                    <i class="layui-icon layui-icon-screen-full"></i>
                </a>
            </li>
            <li class="layui-nav-item" lay-unselect="">
                <a href="javascript:">
                    <cite>贤心</cite>
                    <span class="layui-nav-more"></span></a>
                <dl class="layui-nav-child">
                    <dd><a lay-href="set/user/info.html">基本资料</a></dd>
                    <dd><a lay-href="set/user/password.html">修改密码</a></dd>
                    <hr>
                    <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>
                </dl>
            </li>

            <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                <a href="javascript:" layadmin-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a>
            </li>
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect="">
                <a href="javascript:" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
            </li>
            <span class="layui-nav-bar"></span></ul>
    </div>
    <!-- 页面侧边栏 -->
    <div class="layui-side layui-side-menu">
        <div class="layui-side-scroll">
            <div class="layui-logo" lay-href="">
                <span>layuiAdmin</span>
            </div>
            <ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="layadmin-system-side-menu">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:">默认展开</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:">选项一</a></dd>
                        <dd><a href="javascript:">选项二</a></dd>
                        <dd><a href="javascript:">选项三</a></dd>
                        <dd><a href="">跳转项</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">移动模块</a></dd>
                        <dd><a href="">后台模版</a></dd>
                        <dd><a href="">电商平台</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">云市场</a></li>
                <li class="layui-nav-item"><a href="">社区</a></li>
            </ul>
        </div>
    </div>
    <!-- 页面标签 -->
    <div class="layadmin-pagetabs">
        <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
        <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
        <div class="layui-icon layadmin-tabs-control layui-icon-down">
            <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
                <li class="layui-nav-item" lay-unselect="">
                    <a href="javascript:"><span class="layui-nav-more"></span></a>
                    <dl class="layui-nav-child layui-anim-fadein">
                        <dd layadmin-event="closeThisTabs"><a href="javascript:">关闭当前标签页</a></dd>
                        <dd layadmin-event="closeOtherTabs"><a href="javascript:">关闭其它标签页</a></dd>
                        <dd layadmin-event="closeAllTabs"><a href="javascript:">关闭全部标签页</a></dd>
                    </dl>
                </li>
                <span class="layui-nav-bar"></span></ul>
        </div>
        <div class="layui-tab" lay-unauto="" lay-allowclose="true" lay-filter="layadmin-layout-tabs">
            <ul class="layui-tab-title" id="LAY_app_tabsheader">
                <li lay-id="home/console.html" lay-attr="home/console.html" class="layui-this"><i
                        class="layui-icon layui-icon-home"></i><i
                        class="layui-icon layui-unselect layui-tab-close">ဆ</i></li>
            </ul>
        </div>
    </div>
    <!-- 内容主体区域 -->
    <div class="layui-body">
        <div class="layadmin-tabsbody-item layui-show">
            <iframe src="songlist/" frameborder="0" class="layadmin-iframe"></iframe>
        </div>
    </div>
    <!-- 辅助元素，一般用于移动设备下遮罩 -->
    <div class="layadmin-body-shade" layadmin-event="shade"></div>
    <!-- 底部固定区域 -->
    <div class="layui-footer">
        © layui.com - 底部固定区域
    </div>
</div>
<script src="/static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['table', 'element', 'laytpl', 'layer'], function () {
        var table = layui.table;
        var element = layui.element;
        var laytpl = layui.laytpl;
        var layer = layui.layer;
        var $ = layui.jquery;
        table.render({
            elem: '#song_list',
            url: '/show/songlist/',
            page: true,
            toolbar: true,
            defaultToolbar: ['filter', 'print', 'exports'],
            title: '歌单',
            cols: [[
                {field: 'id', width: 80, title: 'ID', sort: true, fixed: 'left'},
                {field: 'name', width: '20%', title: '歌单名称'},
                {field: 'creator', width: 180, title: '创建人'},
                {field: 'url', width: '40%', title: '链接地址'},
                {field: 'view_counts', title: '播放量', sort: true}
            ]]
        });
        table.on('row(table_demo)', function (obj) {
            layer.open({
                type: 1,
                title: '提示',
                content: $('#table_item'),
            });
        });
        // 监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
        // 定义 layui 模板
        laytpl.config({
            open: '[[',
            close: ']]'
        });
    });
</script>
<style>
    .layui-layout-admin .layui-logo {
        background-color: #3A3D49 !important;
    }
</style>
</body>
</html>